<template>
	<view class="page">
		<!-- 操作栏 -->
		<view class="action-bar">
			<text class="total-count">共 {{ historyList.length }} 条记录</text>
			<view class="action-buttons">
				<text class="action-btn" @click="clearHistory">清空历史</text>
			</view>
		</view>

		<!-- 历史记录列表 -->
		<view class="content">
			<view 
				class="history-item"
				v-for="item in historyList"
				:key="item.id"
				@click="viewDetail(item)"
			>
				<view class="item-left">
					<image :src="item.image || '/static/svg/comprehensive.svg'" class="item-image" />
					<view class="item-info">
						<text class="item-title">{{ item.title }}</text>
						<text class="item-desc">{{ item.description }}</text>
						<view class="item-meta">
							<text class="meta-type">{{ item.type }}</text>
							<text class="meta-time">{{ item.visitTime }}</text>
						</view>
					</view>
				</view>
				<view class="item-actions">
					<image 
						src="/static/svg/minus.svg" 
						class="delete-icon"
						@click.stop="removeItem(item)"
					/>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="historyList.length === 0" class="empty-state">
			<image src="/static/svg/trend-up.svg" class="empty-icon" />
			<text class="empty-text">暂无浏览记录</text>
			<text class="empty-hint">去探索更多精彩内容吧～</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 浏览历史数据
const historyList = ref([
	{
		id: 1,
		type: '活动',
		title: '周末徒步登山活动',
		description: '一起去感受大自然的美好，放松身心',
		image: '/static/images/activity1.jpg',
		visitTime: '1小时前'
	},
	{
		id: 2,
		type: '动态',
		title: '小王的日常分享',
		description: '今天天气真好，心情也特别棒！',
		image: '/static/images/activity2.jpg',
		visitTime: '2小时前'
	},
	{
		id: 3,
		type: '活动',
		title: '咖啡品鉴会',
		description: '学习咖啡文化，品味不同产区的咖啡豆',
		image: '/static/images/activity3.jpg',
		visitTime: '昨天 15:30'
	},
	{
		id: 4,
		type: '动态',
		title: '美食探店记录',
		description: '发现了一家超棒的小众餐厅',
		image: null,
		visitTime: '昨天 12:20'
	},
	{
		id: 5,
		type: '活动',
		title: '读书分享会',
		description: '一起阅读，分享读书心得',
		image: null,
		visitTime: '前天 20:15'
	}
]);

// 查看详情
const viewDetail = (item) => {
	uni.showToast({
		title: '查看详情功能开发中',
		icon: 'none'
	});
};

// 删除单个记录
const removeItem = (item) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除这条浏览记录吗？',
		success: (res) => {
			if (res.confirm) {
				const index = historyList.value.findIndex(i => i.id === item.id);
				if (index > -1) {
					historyList.value.splice(index, 1);
					uni.showToast({
						title: '已删除',
						icon: 'success'
					});
				}
			}
		}
	});
};

// 清空所有历史
const clearHistory = () => {
	if (historyList.value.length === 0) {
		uni.showToast({
			title: '暂无记录可清空',
			icon: 'none'
		});
		return;
	}
	
	uni.showModal({
		title: '提示',
		content: '确定要清空所有浏览历史吗？此操作不可恢复。',
		success: (res) => {
			if (res.confirm) {
				historyList.value = [];
				uni.showToast({
					title: '已清空历史记录',
					icon: 'success'
				});
			}
		}
	});
};
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
}

/* 操作栏 */
.action-bar {
	background: white;
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
}

.total-count {
	font-size: 14px;
	color: #666;
}

.action-buttons {
	display: flex;
	gap: 15px;
}

.action-btn {
	font-size: 14px;
	color: #667eea;
	padding: 5px 10px;
	border: 1px solid #667eea;
	border-radius: 15px;
	background: transparent;
}

.action-btn:active {
	background: #667eea;
	color: white;
}

/* 内容区域 */
.content {
	padding: 0 20px;
}

/* 历史记录项 */
.history-item {
	background: white;
	border-radius: 12px;
	padding: 15px;
	margin: 15px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.item-left {
	display: flex;
	flex: 1;
}

.item-image {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	margin-right: 15px;
	background: #f8f9fa;
}

.item-info {
	flex: 1;
}

.item-title {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	display: block;
	margin-bottom: 6px;
}

.item-desc {
	font-size: 14px;
	color: #666;
	display: block;
	margin-bottom: 8px;
	line-height: 1.3;
	/* 文本截断 */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.item-meta {
	display: flex;
	gap: 12px;
}

.meta-type {
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 10px;
	background: #667eea;
	color: white;
}

.meta-time {
	font-size: 12px;
	color: #999;
}

.item-actions {
	display: flex;
	align-items: center;
	margin-left: 15px;
}

.delete-icon {
	width: 20px;
	height: 20px;
	filter: opacity(0.5);
}

.delete-icon:active {
	filter: opacity(1) hue-rotate(320deg);
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 80px 20px;
}

.empty-icon {
	width: 64px;
	height: 64px;
	opacity: 0.3;
	margin-bottom: 20px;
}

.empty-text {
	font-size: 16px;
	color: #666;
	display: block;
	margin-bottom: 8px;
}

.empty-hint {
	font-size: 14px;
	color: #999;
	display: block;
}
</style> 